<template>
  <view class="feedback">
    <view class="feedback-form">
      <view class="form-item feedback-type">
        <view class="item-label">反馈类型</view>
        <view class="type-selector" @click="showTypeSelector">
          <view class="selected-type">{{ selectedTypeText || '请选择反馈类型' }}</view>
          <el-icon name="arrow-right"></el-icon>
        </view>
      </view>
      
      <view class="form-item feedback-content">
        <view class="item-label">反馈内容</view>
        <el-textarea v-model="content" placeholder="请详细描述您遇到的问题或提出您的建议" 
                     :rows="5" show-word-limit :maxlength="500"></el-textarea>
      </view>
      
      <view class="form-item feedback-contact">
        <view class="item-label">联系方式</view>
        <el-input v-model="contact" placeholder="请留下您的手机号或邮箱，以便我们联系您"></el-input>
      </view>
      
      <view class="form-item feedback-images">
        <view class="item-label">上传图片</view>
        <view class="upload-images">
          <view class="upload-btn" @click="chooseImage" v-if="images.length < 5">
            <el-icon name="plus"></el-icon>
          </view>
          <view class="image-item" v-for="(image, index) in images" :key="index">
            <el-image :src="image" mode="aspectFill"></el-image>
            <el-icon name="delete" @click="deleteImage(index)"></el-icon>
          </view>
        </view>
      </view>
    </view>
    
    <el-button type="primary" class="submit-btn" @click="submitFeedback">提交反馈</el-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackTypes: [
        { id: 1, name: '功能建议' },
        { id: 2, name: '体验问题' },
        { id: 3, name: '商品相关' },
        { id: 4, name: '物流问题' },
        { id: 5, name: '支付问题' },
        { id: 6, name: '账户问题' },
        { id: 7, name: '其他问题' }
      ],
      selectedTypeId: '',
      content: '',
      contact: '',
      images: []
    }
  },
  computed: {
    selectedTypeText() {
      const type = this.feedbackTypes.find(item => item.id === this.selectedTypeId)
      return type ? type.name : ''
    }
  },
  methods: {
    showTypeSelector() {
      const itemList = this.feedbackTypes.map(item => item.name)
      
      uni.showActionSheet({
        itemList,
        success: (res) => {
          this.selectedTypeId = this.feedbackTypes[res.tapIndex].id
        }
      })
    },
    chooseImage() {
      const count = 5 - this.images.length
      
      uni.chooseImage({
        count,
        success: (res) => {
          this.images = [...this.images, ...res.tempFilePaths]
        }
      })
    },
    deleteImage(index) {
      this.images.splice(index, 1)
    },
    async submitFeedback() {
      if (!this.selectedTypeId) {
        this.$toast('请选择反馈类型')
        return
      }
      
      if (!this.content.trim()) {
        this.$toast('请输入反馈内容')
        return
      }
      
      if (!this.contact.trim()) {
        this.$toast('请输入联系方式')
        return
      }
      
      try {
        // 上传图片
        const imageUrls = []
        for (const image of this.images) {
          const res = await this.$api.uploadFile('/feedback/upload', image)
          imageUrls.push(res.url)
        }
        
        // 提交反馈
        const feedbackData = {
          typeId: this.selectedTypeId,
          content: this.content,
          contact: this.contact,
          images: imageUrls
        }
        
        await this.$api.post('/feedback/submit', feedbackData)
        
        this.$toast.success('反馈提交成功，感谢您的支持！')
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        this.$toast.fail(error.message || '提交失败，请稍后再试')
      }
    }
  }
}
</script>

<style>
.feedback {
  background-color: #f8f8f8;
  min-height: 100vh;
  padding-bottom: 70px;
}
.feedback-form {
  background-color: #fff;
  margin-bottom: 15px;
}
.form-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}
.form-item:last-child {
  border-bottom: none;
}
.item-label {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.feedback-type .item-label, .feedback-images .item-label {
  margin-bottom: 0;
}
.type-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
}
.selected-type {
  font-size: 14px;
  color: #666;
}
.upload-images {
  display: flex;
  flex-wrap: wrap;
}
.upload-btn {
  width: 80px;
  height: 80px;
  border: 1px dashed #eee;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  margin-right: 10px;
  margin-bottom: 10px;
}
.image-item {
  width: 80px;
  height: 80px;
  margin-right: 10px;
  margin-bottom: 10px;
  position: relative;
}
.image-item image {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.image-item .el-icon {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  font-size: 12px;
}
.submit-btn {
  position: fixed;
  bottom: 15px;
  left: 15px;
  right: 15px;
  height: 45px;
  line-height: 45px;
  border-radius: 22.5px;
}
</style>    